<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title>Imagens e Tabelas</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="estilo.css">
    </head>
    <body>
        <div class="menu">
        <a id="inicio">
            <h3>IMAGENS E TABELAS</h3>
        </a>
        <ul>
            <li><a href="#31">3.1 IMAGENS</a></li>
            <li><a href="#311">3.1.1 INSERINDO IMAGENS</a></li>
            <li><a href="#312">3.1.2 BACKGROUND COM IMAGENS</a></li> 
            <li><a href="#313">3.1.3 IMAGENS COMO HIPERLINK</a></li>
            <li><a href="#32">3.2 TABELAS</a></li>
            <li><a href="#321">3.2.1 INSERINDO TABELAS</a></li>
            <li><a href="html.html">Menu Principal</a></li>
        </ul>
        </div>
        <div class="corpo">
        <p>
            <a id="31">3.1 IMAGENS </a>
        </p>
        <p>
            Incluir uma imagem em uma página HTML é uma tarefa simples, mas que 
            requer alguns requisitos básicos. Antes de criar uma página com 
            dezenas de figuras e fotos, lembre-se uma figura demora mais para 
            carregar do que textos. 
        </p>
        <p>
            <a id="311">3.1.1 INSERINDO IMAGENS </a>
        </p>
        <p>
            O comando &lt;img&gt; é responsável por definir a posição em que uma 
            imagem será inserida. Sua sintaxe básica com seus respectivos parâmetros 
            está descrito abaixo. Com exceção do parâmetro src, todos os demais são 
            opcionais. 
        </p>
        <p>
            &lt;img src = url width = tam height = tam border = num alt = texto 
            vspace = num hspace = num align = sentido&gt; 
        </p>
        <p>
            src: É o nome da figura se estiver no mesmo diretório do programa, 
            ou o seu caminho completo se estiver em outro diretório. 
        </p>
        <p>
            width: Especifica a largura em pixels de exibição da imagem 
            independente do seu tamanho físico. Se a imagem for maior ou menor 
            do que o valor especificado, ela será esticada ou comprimida para 
            caber no espaço especificado. Se for colocado o sinal de percentual, 
            ele é relativo à largura da janela. 
        </p>
        <p>
            height: Altura em pixels de exibição da imagem. 
        </p>
        <p>
            border: Especifica em pixels a largura da borda da imagem. O valor 
            zero remove a borda. 
        </p>
        <p>
            alt: Permite a exibição de um texto alternativo no lugar da imagem 
            quando o navegador não puder carregá-la. 
        </p>
        <p>
            vspace: Determina em pixels o espaço que deve ser deixado em branco 
            acima e abaixo da imagem. 
        </p>
        <p>
            hspace: Determina o espaço que deve ser deixado do lado esquerdo e 
            direito da imagem. 
        </p>
        <p>
            align: Especifica o alinhamento da imagem relativa à linha do texto 
            onde é exibida. Pode assumir os seguintes valores: top (acima), 
            middle( ao meio), bottom (abaixo), left (à esquerda) e right (à direita). 
        </p>
        <p>
            <a id="312">3.1.2 BACKGROUND COM IMAGENS </a>
        </p>
        <p>
            Usar um fundo colorido dá outra vida para sua página. Melhor ainda é 
            utilizar pequenas imagens para o fundo. Em vez de usar um código de 
            cor na opção bgcolor, você pode especificar o nome de um arquivo de 
            imagem na opção background do comando body. Esta imagem será 
            espalhada por toda a página de forma a encher o fundo da tela: 
        </p>
        <p>
            &lt;body background="arquivo.jpg"&gt;
        </p>
        <p>
            <a id="313">3.1.3 IMAGENS COMO HIPERLINK </a>
        </p>
        <p>
            Você pode usar uma imagem como hiperlink envolvendo-a com o comando 
            &lt;A&gt; &lt;/A&gt;. Em vez de especificar um texto, você usa o 
            comando &lt;img&gt; para colocar a imagem: 
        </p>

        &lt;a href=link&gt; &lt;img src=imagem.jpg&gt;&lt;/a&gt; 

        <p>
            <a id="32">3.2 TABELAS </a>
        </p>
        <p>
            O uso de tabelas melhora muito a aparência de uma página, por 
            permitir o alinhamento de textos e imagens, além de ordenar as 
            informações de forma padronizada. 
        </p>
        <p>
            Uma tabela é criada através do comando &lt;table&gt; &lt;/table&gt; 
            e consiste em linhas e colunas. A interseção de uma linha com uma 
            coluna é chamada de célula. As linhas de uma tabela são criadas pelo 
            comando &lt;tr&gt; &lt;/tr&gt;. As células de uma linha são criadas 
            pelo comando &lt;td&gt; &lt;/td&gt;. 
        </p>
        <p>
            <a id="321">3.2.1 INSERINDO TABELAS </a>
        </p>
        <p>
            O comando &lt;table&gt; define a estrutura bidimensional da tabela: 
        </p>
        <p>
            &lt;table border=numero cellspacing=numero cellpadding=numero 
            width=numero align=alinhamento bgcolor=cor bordercolor = cor &gt;
        </p>
        <p>
            border: Especifica a largura da linha das bordas que separam as 
            células da tabela. Se não for especificado, não será exibido uma 
            borda para a tabela. 
        </p>
        <p>
            cellspacing: Especifica o espaçamento em pixels entre as células. 
        </p>
        <p>
            cellpadding: Espaçamento entre o conteúdo e a borda da célula. 
        </p>
        <p>
            width: Largura da tabela em pixels. 
        </p>
        <p>
            align: Alinhamento da tabela na página. Pode ser right, left ou center. 
        </p>
        <p>
            bgcolor: Especifica a cor de fundo de toda a tabela 
        </p>
        <p>
            bordercolor: Especifica a cor das bordas da tabela 
        </p>
        <p>
            O comando &lt;tr&gt; (Table Row) define uma linha da tabela. Para cada 
            linha de uma tabela, deve ser especificado um par deste comando, onde, 
            dentro deles, devem ser especificados os comandos &lt;td&gt; ou 
            &lt;th&gt; para criar as células de dados daquela linha. 
        </p>
        <p>
            &lt;tr align=alinhamento valign = alinhamento bgcolor=cor 
            bordercolor = cor &gt;
        </p>
        <p>
            ALIGN: Alinhamento horizontal do conteúdo da linha: right, left, center ou justify <br/>
            VALIGN: Alinhamento vertical do conteúdo da linha: top, middle ou bottom <br/>
            BGCOLOR: Especifica a cor de fundo da linha <br/>
            BORDERCOLOR: Especifica a cor de borda da linha <br/>
        </p>
        <p>
            O comando &lt;td&gt; (Table Data) define o conteúdo de uma célula da linha de uma planilha. <br/>
            Cada célula de uma linha precisa ser especificada por meio deste comando. Dentro de uma <br/>
            célula você pode colocar qualquer elemento aceito em uma página HTML como um texto ou 
            imagem. <br/>
        </p>
        <p>
            &lt;td align=alinhamento valign = alinhamento bgcolor=cor bordercolor = cor nowrap 
            colspan=numero rowspan=numero&gt; 
        </p> 
        <p>
            ALIGN: Alinhamento horizontal do conteúdo da célula: right, left, center ou justify<br/> 
            VALIGN: Alinhamento vertical do conteúdo da célula: top, middle ou bottom <br/>
            BGCOLOR: Especifica a cor de fundo da célula <br/>
            BORDERCOLOR: Especifica a cor de borda da célula <br/>
            NOWRAP: Indica para não quebrar a linha dentro da célula <br/>
            COLSPAN: Indica o número de colunas que esta célula deverá ocupar <br/>
            ROWSPAN: Indica o número de linhas que esta célula deverá ocupar <br/>
        </p>
        <p>
            Através do par de comandos &lt;th&gt; (Title Heading) você pode 
            especificar títulos para as colunas. Estes comandos funcionando da mesma 
            forma que os comandos &lt;td&gt;, só que deixam o conteúdo da célula centralizado e em negrito. 
        </p>

        <a href="ex09.html">EX09</a> 
        </div>
    </body>
</html>
